<template>
	<el-form ref="loginForm" :rules="loginRules" :model="loginForm" class="login-form" status-icon label-width="0">
		<el-form-item prop="username">
			<el-input v-model.trim="loginForm.username" auto-complete="off" placeholder="请输入用户名" @keyup.enter.native="handleLogin">
				<i slot="prefix" class="icon-yonghu" />
			</el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input :type="passwordType" v-model.trim="loginForm.password" maxlength="16" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin">
				<i slot="suffix" class="el-icon-view el-input__icon" @click="showPassword" />
				<!--<router-link to="/forgetlogin" slot="suffix">
          <a href="#" class="alink" style="padding-left:8px;">忘记密码？</a>
                </router-link>-->
				<i slot="prefix" class="iconfont icon-mima"></i>
			</el-input>
		</el-form-item>
		<el-form-item prop="code">
			<el-row :span="24">
				<el-col :span="16">
					<el-input :maxlength="code.len" v-model.trim="loginForm.code" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="handleLogin">
						<i slot="prefix" class="icon-yanzhengma" />
					</el-input>
				</el-col>
				<el-col :span="8">
					<div class="login-code">
						<span v-if="code.type == 'text'" class="login-code-img" @click="refreshCode">{{ code.value }}</span>
						<img v-else :src="code.src" class="login-code-img" @click="refreshCode" />
						<!-- <i class="icon-shuaxin login-code-icon" @click="refreshCode"></i> -->
					</div>
				</el-col>
			</el-row>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" class="login-submit" @click.native.prevent="handleLogin" :loading="btnloading">登录</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
import { randomLenNum } from '@/util/util';
import { mapGetters } from 'vuex';
export default {
	name: 'Userlogin',
	data() {
		let validatePwd = (rule, value, callback) => {
			let num = 0,
				rep1 = /[A-Z]/g, // 大写字母
				rep2 = /[a-z]/g, // 小写字母
				rep3 = /[~!@￥#$%^&*()_+{}:"<>?/*-+~！@#￥%…&*（）—=｛｝|《》？]/g;
			rep1.test(value) ? num++ : '';
			rep2.test(value) ? num++ : '';
			rep3.test(value) ? num++ : '';
			if (num >= 2) {
				callback();
			} else {
				callback(new Error('大小写字母和特殊符号，不少于两种!'));
			}
		};
		return {
			btnloading: false,
			socialForm: {
				code: '',
				state: '',
			},
			loginForm: {
				username: '',
				password: '',
				code: '',
				redomStr: '',
			},
			checked: false,
			code: {
				src: '/code',
				value: '',
				len: 4,
				type: 'image',
			},
			loginRules: {
				username: [
					{
						required: true,
						message: '请输入用户名',
						trigger: 'blur',
					},
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 8, max: 16, message: '密码长度为8-16位', trigger: 'blur' },
					{
						required: true,
						validator: validatePwd,
						trigger: 'blur',
					},
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'blur',
					},
					{
						min: 4,
						max: 4,
						message: '验证码长度为4位',
						trigger: 'blur',
					},
				],
			},
			passwordType: 'password',
		};
	},
	created() {
		this.refreshCode();
	},
	mounted() {},
	computed: {
		...mapGetters(['tagWel']),
	},
	props: [],
	methods: {
		refreshCode() {
			this.loginForm.code = '';
			this.loginForm.randomStr = randomLenNum(this.code.len, true);
			this.code.type === 'text' ? (this.code.value = randomLenNum(this.code.len)) : (this.code.src = `${this.codeUrl}?randomStr=${this.loginForm.randomStr}`);
		},
		showPassword() {
			this.passwordType == '' ? (this.passwordType = 'password') : (this.passwordType = '');
		},
		handleLogin() {
			this.$refs.loginForm.validate((valid) => {
				if (valid) {
					this.btnloading = true;
					let self = this;
					this.$store
						.dispatch('LoginByUsername', this.loginForm)
						.then((res) => {
							//登录用户绑定企业信息，参数为租户id
							self.$store.commit('SET_LOGINTIME', new Date());
							self.$store.dispatch('BindCorp', res.tenant_id).then(() => {});
							this.$router.push({ path: this.tagWel.value });
							setTimeout(() => {
								this.btnloading = false;
							}, 1500);
						})
						.catch(() => {
							this.refreshCode();
							setTimeout(() => {
								this.btnloading = false;
							}, 500);
						});
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.login-submit {
	margin-top: 10px;
}
</style>
